<template>
    <div>
        <h-section title="阶段规划信息" collapse style="padding: 12px 0">
            <a-form layout="inline">
                <a-row>
                    <a-col :span="24">
                        <a-form-item label="阶段时间">
                            <span>{{ planDetail?.startDate }}</span>
                            <span v-if="planDetail && planDetail.startDate">~</span>
                            <span>
                                {{ planDetail?.endDate }}
                            </span>
                        </a-form-item>
                    </a-col>
                    <a-col :span="24">
                        <a-form-item label="阶段规划">
                            <div v-html="planDetail?.content" v-if="planDetail?.content" />
                        </a-form-item>
                    </a-col>
                </a-row>
            </a-form>
        </h-section>

        <flexbox style="padding: 0 16px" v-if="detail">
            <div class="card-item">
                <div style="font-size: 18px; font-weight: bold">版本统计</div>
                <div style="font-size: 42px; font-weight: bold; margin: 12px 0 24px 0">{{ detail.versionCount }}/{{ detail.ssVersionCount }}</div>
                <div style="font-size: 16px">实际发布/规划数量</div>
            </div>
            <div class="card-item" style="margin: 0 36px">
                <div style="font-size: 18px; font-weight: bold">业务需求</div>
                <div style="font-size: 42px; font-weight: bold; margin: 12px 0 24px 0">{{ detail.businessCount }}/{{ detail.ssBusinessCount }}</div>
                <div style="font-size: 16px">实际发布/规划数量</div>
            </div>
            <div class="card-item">
                <div style="font-size: 18px; font-weight: bold">产品需求</div>
                <div style="font-size: 42px; font-weight: bold; margin: 12px 0 24px 0">
                    {{ detail.productCount }}
                </div>
                <div style="font-size: 16px">实际发布数量</div>
            </div>
        </flexbox>
        <div style="padding: 0 16px" v-else>
            <a-alert :message="errorMsg" type="warning" show-icon v-if="errorMsg" />
        </div>
    </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue';
export default defineComponent({
    props: {
        // 年度规划
        planDetail: {
            type: Object,
            default: () => ({})
        },
        detail: {
            type: Object,
            default: () => ({})
        },
        errorMsg: {
            type: String,
            default: ''
        }
    }
});
</script>

<style scoped lang="less">
.card-item {
    width: calc(33.3% - 24px);
    border-radius: 16px;
    height: 200px;
    background: #f2f3f5;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 20px 0 12px 0;
}
</style>